<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElIcon, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { User, Unlock } from '@element-plus/icons-vue';
import { useAuthStore, useUserStore } from '@/store';
import { useRouter } from 'vue-router';
import { authLoginNode } from '@/services';

const userStore = useUserStore();
const authStore = useAuthStore();
const router = useRouter();

const form = reactive({
	email: '',
	password: '',
});
const loading = ref(false);
const formRef = ref<FormInstance>();

const rules = reactive<FormRules>({
	email: [
		{ required: true, message: '请输入账号', trigger: 'blur' },
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
	],
});

const onSubmit = async () => {
	if (formRef.value) {
		const valid = await formRef.value?.validate();
		if (!valid) {
			return;
		}
		try {
			loading.value = true;
			const res = await authLoginNode({
				username: form.email,
				password: form.password,
			});
			userStore.email = form.email;
			authStore.setToken(res.data.token);
			router.push('/');
		} catch (err) {
			console.log(err);
			ElMessage({
				type: 'warning',
				message: '用户名或密码错误',
			});
		} finally {
			loading.value = false;
		}
	}
};
</script>

<template>
	<div class="login-container">
		<div class="form-container">
			<ElForm ref="formRef" :model="form" class="login-form" :rules="rules">
				<ElFormItem prop="email">
					<ElInput v-model="form.email" placeholder="账号" autocomplete="new-password">
						<template #prefix>
							<ElIcon :size="20" color="#2771FF"><User /></ElIcon>
						</template>
					</ElInput>
				</ElFormItem>
				<ElFormItem prop="password">
					<ElInput v-model="form.password" placeholder="密码" @keydown.enter="onSubmit" type="password" show-password autocomplete="new-password">
						<template #prefix>
							<ElIcon :size="20" color="#2771FF"><Unlock /></ElIcon>
						</template>
					</ElInput>
				</ElFormItem>
				<ElFormItem>
					<div class="login-btn" @click="onSubmit">
						登 录
					</div>
				</ElFormItem>
			</ElForm>
		</div>
  </div>
</template>

<style lang="less">
.login-container {
	position: relative;
  height: calc(100vh - 35px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('/bg/login.png');
  background-size: cover;
  background-position: center center;
  img {
    display: inline-block;
  }
  &>div:nth-child(2) {
    font-size: 12px;
  }
	.form-container {
		width: 586px;
		height: 299px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient( 180deg, rgba(0,30,61,0.89) 0%, rgba(0,28,57,0.89) 46%, rgba(0,31,68,0.89) 64%, rgba(1,36,85,0.9) 77%, rgba(3,54,151,0.92) 100%);
		box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.07);
		border-radius: 2px;
		border: 2px solid;
		opacity: 0.91;
		border-image: linear-gradient(180deg, rgba(130, 173, 255, 0.51), rgba(79, 135, 215, 1)) 1 1;
		backdrop-filter: blur(0px);
		.el-form-item {
			margin-bottom: 20px;
			&:last-child {
				margin-bottom: 0;
				margin-top: 28px;
			}
		}
		.el-input {
			--el-input-height: 42px;
			--el-input-bg-color: rgba(0,0,0,0.24);
			--el-input-text-color: #2771FF;
		}
		.el-input__wrapper {
			box-shadow: none;
			border: none;
			outline: none;
			font-size: 16px;
		}
	}
	.login-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 46px;
		background: #143471;
		box-shadow: inset 0px 0px 22px 0px #2C72F8;
		border-radius: 2px;
		border: 1px solid #2C72F8;
		font-weight: 500;
		font-size: 18px;
		color: #2771FF;
		line-height: 25px;
		cursor: pointer;
		&:hover {
			box-shadow: inset 0px 0px 26px 0px #2C72F8;
		}
	}
}
.login-title {
	position: absolute;
	margin-top: 20px;
	font-size: 24px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3063C9;
}
.login-form {
	width: 300px;
}
.el-button {
	background-color: var(--el-button-bg-color);
	&:hover {
		background-color: var(--el-button-hover-bg-color);
	}
}
.mobile-login {
	.login-form {
		width: 80vw;
	}
}
</style>
